<template>
	<view v-if="!initUI" class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="自助缴费"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">

			<view class="dawn-wrap tn-margin-top-sm">
				<view class="list-box" style="display: block;">
					<view class="list-box__left">
						<text class="dawn-color-red tn-padding-right-ss">*</text>
						<view class="list-box__left__text">办理业务</view>
					</view>
					<view class="tn-width-full tn-margin-top-xs dawn-border tn-flex tn-flex-wrap">
						<view v-for="(item,index) in busList" :key="index" @click="chooseDict(item)">
							<view class="dawn-check-box" style="padding: 7px 10px;white-space: normal;text-align:left;"
								:class="item.label === payData.orderType?'dawn-check-box__select':''">
								<view class="dawn-text-sm">
									{{ item.label }}
								</view>
								<view v-if="item.label === payData.orderType" class="dawn-check-box__select--icon"
									style="font-size: 13px;">
									<view class="tn-icon-success-square-fill"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<view class="dawn-wrap tn-margin-top-sm">
				<view class="dawn-border-bottom tn-padding-bottom-ss dawn-color-dark">
					<text class="tn-icon-image-text-fill"></text>
					<text class="">缴费信息</text>
				</view>
				<view class="">
					<view class="list-box">
						<view class="list__left">
							<view class="list__left__text">缴费商户</view>
						</view>
						<view class="list-box__right">
							<text>{{appConfig.appTitle || '' }}</text>
						</view>
					</view>
				</view>
				<view class="">
					<view class="list-box">
						<view class="list__left">
							<view class="list__left__text">缴费业务</view>
						</view>
						<view class="list-box__right">
							<tn-tag class="dawn-tag-sm dawn-tag-sm__4"
								v-if="payData.orderType">{{payData.orderType || '' }}</tn-tag>
						</view>
					</view>
				</view>
				<view class="">
					<view class="list-box">
						<view class="list__left">
							<view class="list__left__text">缴费金额</view>
						</view>
						<view class="list-box__right">
							<text class="dawn-color-red" v-if="payData.amount">¥ {{payData.amount || '' }}</text>
						</view>
					</view>
				</view>
			</view>


			<!-- 悬浮按钮-->
			<view class="tn-flex tn-footerfixed">
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button @click="createOrder()" class="dawn-btn-lg dawn-btn-lg__main">
						<text class="tn-icon-check tn-padding-right-xs"></text>
						<text>确认办理</text>
					</tn-button>
				</view>
			</view>

			<view v-if="show">
				<dawnMsg :msg="msg"></dawnMsg>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>

	<view v-else>
		<view class="init-container">
			<view class="top-bg">
				<view class="top-box-img" :style="{backgroundImage:'url('+appConfig.loginBg+')'}"></view>
			</view>
			<view class="container">
				<!-- 流星-->
				<view class="tn-satr">
					<view class="sky"></view>
					<view class="stars">
						<view class="falling-stars">
							<view class="star-fall"></view>
							<view class="star-fall"></view>
							<view class="star-fall"></view>
							<view class="star-fall"></view>
						</view>
						<view class="small-stars">
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
						</view>
						<view class="medium-stars">
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
							<view class="star"></view>
						</view>
					</view>
				</view>

				<view class="login-container">
					<view class="init-box">
						<image class="init-box--image" mode="aspectFit" :src="appConfig.companyRespVO.logoText"></image>

						<view class="init-box--title">
							<view>{{ appConfig.appTitle }}</view>
						</view>

						<view class="init-box--loading">
							<view class="app-loading-item">
								<view class="app-loading-outter"></view>
								<view class="app-loading-inner"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as QrcodepayApi from "@/api/hospital/qrcodepay.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo']),
		data() {
			return {
				initUI: true,
				loading: false,
				show: false,
				msg: '',
				iconSize: 38,
				size: 40,
				queryData: {
					patientId: '0',
					patientName: '0'
				},
				payData: {
					orderType: '',
					amount: ''
				},
				type: '',
				// 支付方式 PAY_WX_JSAIPI PAY_WX_CHS PAY_ALI_JSAIPI
				payType: 'PAY_WX_JSAIPI',
				list: [],
				busList: []
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.info("qrcode pay onLoad")
			
			if (!this.isLogin) {
				this.loading = true;
				toLogin();
				return;
			} else {
				this.$nextTick(() => {
					if (options.hasOwnProperty('type')) {
						this.loading = true;
						this.type = options.type;
					}else{
						this.initUI = false;
					}
					this.initData();
				})
			}
		},
		methods: {
			initData() {
				let that = this;
				api.getDictDataListByType(config.DICT_TYPE.QRCODE_PAY_ITEM).then(res => {
					console.table(res)
					if (res.code === 0) {
						that.busList = res.data;

						console.info(that.type)
						if (that.type) {
							const array = that.busList.filter((item) => (item.value === that.type));
							if (array.length > 0) {
								that.payData.orderType = array[0].label;
								that.payData.amount = array[0].remark;
								that.createOrder();
							}
							that.initUI = false;
						}
					}
				});

			},
			chooseDict(item) {
				console.table(item);
				this.payData.orderType = item.label;
				this.payData.amount = item.remark;
			},
			createOrder: function() {
				let that = this;
				if (!this.payData.orderType) {
					return this.$util.Tips({
						title: '请选择办理业务'
					});
				}
				this.loading = true;
				this.show = false;
				this.payData.userId = this.userInfo.id;
				this.payData.openid = this.userInfo.openid;
				this.payData.patientId = '-';
				this.payData.patientName = '-';
				this.payData.title = '微信服务号-'+this.payData.orderType;
				
				// this.payData.patientId = this.patientInfo.patientId;
				// this.payData.clinicNo = this.patientInfo.clinicNo;
				// this.payData.idCardNo = this.patientInfo.cardNo;
				QrcodepayApi.createQrcodePay(this.payData).then(res => {
					this.loading = false;
					console.table(res);
					if (res.code === 0) {
						// that.toPayUI(res.data.orderNumber);
						uni.navigateTo({
							url: '/hosp/qrcode/order?orderNumber=' + res.data.orderNumber
						})
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			navDteail(item) {
				// app.globalData.dataText = this.dataText;
				uni.navigateTo({
					url: '/hosp/qrcode/prescription_recipe?registerNo=' + item.NO
				})
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-icon-text,
	.list-image-text {
		padding: 20rpx 5rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}

	.list {
		font-size: 14px;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 18rpx;
			}

			&__image {
				margin-right: 18rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.list-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 10rpx;
		border-bottom: 1rpx solid $dawn-line-color;

		&__left {
			display: flex;
			align-items: center;
			// justify-content: end;
			width: 90px;
			padding-right: 10rpx;
			white-space: nowrap;
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: calc(100% - 90px);
			;

			&__text {
				font-size: $dawn-font-size-lg;
				font-weight: bolder;
			}

			&__icon {
				font-size: 40rpx;
				padding-left: 7rpx;
			}
		}
	}

	.upload-card-box {
		width: 100%;
		display: flex;
		// justify-content: space-between;
		justify-content: space-around;
		align-items: baseline;
		padding: 10px 5px;
	}

	.card-img {
		position: relative;
		width: 35%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&__img {
			width: 100%;
			height: 120rpx;
			border-radius: $dawn-border-radius;
		}

		&__text {
			margin-top: 10rpx;
			font-size: $dawn-font-size-ss;
			color: $dawn-color-grey;
			text-align: center;
			white-space: nowrap;
		}

		&__del {
			margin-top: 10rpx;
			font-size: $dawn-font-size-lg;
			color: #992019;
			text-align: center;
			white-space: nowrap;
		}

		.del_btn {
			position: absolute;
			top: -30rpx;
			right: -20rpx;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			z-index: 20;
			// color: #992019;
			color: $dawn-color-grey;
			font-size: 50rpx;
			opacity: 0.8;
		}
	}

	.dawn-check-box {
		position: relative;
		padding: 20rpx 0rpx;
		margin: 10rpx;
		border-radius: $dawn-box-radius;
		text-align: center;
		white-space: nowrap;
		background-color: $dawn-bg-grey !important;

		&__select {
			transition: transform .4s;
			font-size: $dawn-font-size-md + 2;
			// font-weight: bolder;
			background-color: $dawn-theme-color-light !important;

			&--icon {
				color: $dawn-theme-color !important;
				position: absolute;
				bottom: -4upx;
				right: -2upx;
				font-size: 40rpx;
				text-align: center;
				// line-height: 50upx;
			}

			&--reverse {
				transform: rotate(-180deg);
			}
		}
	}


.init-container {
		// background-image: url('https://yxcp.yncdb.com:444/dawn-traffic/admin-api/infra/file/18/get/884e6353965f941d35c8e48906313c00eedc2010bceeeafc8bc937ea80176e29.png');
		background-size: 100% 100%;
		width: 100vw;
		height: 100vh;
	}

	.init-box {
		z-index: 10000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 50vh;
		// background-color: $dawn-theme-color-light;
		box-shadow: $dawn-box-shadow;
		border-radius: $dawn-border-radius;

		background-color: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(6rpx);
		-webkit-backdrop-filter: blur(6rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.1);
		box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

		&--image {
			border-radius: 8rpx;
			// width: 100%;
			height: 120rpx;
			margin-bottom: 3vh;
		}

		&--title {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 12vh;
			// margin-bottom: 12vh;
			color: $dawn-theme-color;
			font-size: $dawn-font-size-xl;
			font-weight: bolder;
		}

		&--desc {
			color: $dawn-color-grey;
			font-size: $dawn-font-size-md;
			font-weight: bolder;
			margin-top: 30rpx;
		}

		&--check {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}

		&--btn {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		&--loading {
			width: 75%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


	.init-logo {
		margin-top: - 5vh;
	}

	.init-image {
		border-radius: 8rpx;
		width: 100%;
		height: 150rpx;
	}

	::v-deep .tn-line-progress--active {
		background-color: $dawn-theme-color !important;
	}

	::v-deep .tn-landscape__container {
		top: 60% !important;
	}
</style>